<template>
	<view class="">
		<view class="wrap">
			<u-form class="form-details" :model="model" :rules="rules" ref="uForm" :labelStyle="form_label_Style" labelPosition="left" labelWidth="100">
				<!-- <u-form-item borderBottom label="编号" prop="ProblemCode" v-if="model.ProblemId">
					<u-input readonly v-model="model.ProblemCode" type="text" maxlength="64" border="none"></u-input>
				</u-form-item>
				<u-form-item borderBottom label="问题标题" prop="ProblemTitle" class="form-item-wrap">
					<u-input readonly v-model="model.ProblemTitle" type="text" maxlength="200" border="none"></u-input>
				</u-form-item> -->
				<u-form-item borderBottom label="发现人" prop="ProblemFindByPsn">
					<gf-input-ref :docType="$GC.BASEDOC.SM_USER" readonly v-model="model.ProblemFindByPsn" type="text" maxlength="200" border="none"></gf-input-ref>
				</u-form-item>
				<u-form-item borderBottom label="发现时间" prop="ProblemCreDate">
					<u-input readonly v-model="model.ProblemCreDate" type="text" maxlength="200" border="none"></u-input>
				</u-form-item>
				<!-- <u-form-item borderBottom label="问题人" prop="ProblemPerson">
					<gf-input-ref
						:docType="$GC.BASEDOC.PSNDOC"
						readonly
						@focus="refInputClick('ProblemPerson')"
						v-model="model.ProblemPerson"
						type="text"
						maxlength="200"
						border="none"
					></gf-input-ref>
				</u-form-item> -->
				<u-form-item borderBottom label="问题地点" prop="ProblemLocation">
					<u-input readonly v-model="model.ProblemLocation" type="text" maxlength="200" border="none"></u-input>
				</u-form-item>
				<u-form-item borderBottom label="问题开始时间" prop="ProblemStatrTime">
					<u-input readonly v-model="model.ProblemStatrTime" type="text" @focus="showStartTimeDateTimePicker = true" border="none" />
				</u-form-item>
				<u-form-item borderBottom label="问题结束时间" prop="ProblemEndTime">
					<u-input readonly v-model="model.ProblemEndTime" type="text" @focus="showEndTimeDateTimePicker = true" border="none" />
				</u-form-item>
				<u-form-item borderBottom label="问题描述" prop="ProblemDescription" label-position="top">
					<u--textarea maxlength="1000" autoHeight :count="true" disabled v-model="model.ProblemDescription" border="none" placeholder="请输入"></u--textarea>
				</u-form-item>
				<!-- <u-form-item borderBottom label="录音" prop="ProblemVoice" label-position="left" left-icon="volume">
					<u-button style="width: 100px" type="success" size="mini" @click="navTo('approve/filter')">播放录音</u-button>
				</u-form-item> -->
				<u-form-item borderBottom label="现场图片" prop="problem_picture" labelPosition="top">
					<view class="u-page__upload-item" v-if="model.ProblemPicture">
						<!-- <u-upload
							:deletable="false"
							:maxCount="0"
							:fileList="[
								{
									url: `${this.$GC.API_FS_IP}/${model.ProblemPicture}`
								}
							]"
							:previewFullImage="true"
						></u-upload> -->
						<u-upload :fileList="problemPicFileList" name="uploadPicture" multiple :maxCount="0" :previewFullImage="true"></u-upload>
					</view>
				</u-form-item>
				<u-form-item borderBottom label="现场视频" prop="problem_video" labelPosition="top">
					<view class="" style="margin-top: 10rpx" v-if="model.ProblemVideo">
						<video :src="`${$GC.API_FS_IP}/${model.ProblemVideo}`"></video>
					</view>
				</u-form-item>

				<view v-if="isSecondFilter">
					<u-form-item borderBottom label="是否协同外部门处理" prop="ProblemDef1">
						<u-switch
							disabled
							v-model="isSecondFilter"
							@change="
								(e) => {
									model.ProblemDef1 = e;
									showCpField = e;
								}
							"
						></u-switch>
					</u-form-item>
					<u-form-item @tap="refInputClick('ProblemDef2')" borderBottom label="协同部门" prop="ProblemDef2">
						<gf-input-ref
							:readonly="true"
							:docType="$GC.BASEDOC.DEPT"
							clearable
							placeholder="请输入"
							v-model="model.ProblemDef2"
							type="text"
							maxlength="200"
							border="none"
						></gf-input-ref>
					</u-form-item>
					<u-form-item @tap="refInputClick('ProblemDef3')" borderBottom label="协同人" prop="ProblemDef3">
						<gf-input-ref
							:readonly="true"
							:docType="$GC.BASEDOC.PSNDOC"
							clearable
							placeholder="请输入"
							v-model="model.ProblemDef3"
							type="text"
							maxlength="200"
							border="none"
						></gf-input-ref>
					</u-form-item>
				</view>
				<u-form-item v-if="period == $GC.APPROVE_PERIOD.check" borderBottom label="问题处理图片" prop="problem_picture" labelPosition="top">
					<view class="u-page__upload-item" v-if="model.ProblemHandlePic">
						<!-- <u-upload
							:deletable="false"
							:maxCount="0"
							:fileList="[
								{
									url: `${this.$GC.API_FS_IP}/${model.ProblemHandlePic}`
								}
							]"
							:previewFullImage="true"
						></u-upload> -->
						<u-upload :fileList="problemHandlePicFileList" name="ProblemHandlePic" multiple :maxCount="0" :previewFullImage="true"></u-upload>
					</view>
				</u-form-item>
				<u-form-item v-if="period == $GC.APPROVE_PERIOD.check" borderBottom label="问题处理视频" prop="problem_video" labelPosition="top">
					<view class="" style="margin-top: 10rpx" v-if="model.ProblemHandleVid">
						<video :src="`${$GC.API_FS_IP}/${model.ProblemHandleVid}`"></video>
					</view>
				</u-form-item>
			</u-form>
			<u-datetime-picker
				closeOnClickOverlay
				@confirm="
					(obj) => {
						dateTimePickerCallBack(obj, 'problem_endtime', 'showEndTimeDateTimePicker');
					}
				"
				@close="showEndTimeDateTimePicker = false"
				:show="showEndTimeDateTimePicker"
				mode="datetime"
			></u-datetime-picker>
			<u-datetime-picker
				closeOnClickOverlay
				@confirm="
					(obj) => {
						dateTimePickerCallBack(obj, 'problem_starttime', 'showStartTimeDateTimePicker');
					}
				"
				@close="showStartTimeDateTimePicker = false"
				:show="showStartTimeDateTimePicker"
				mode="datetime"
			></u-datetime-picker>
		</view>
	</view>
</template>
<script>
//录音
const recorderManager = uni.getRecorderManager();
const innerAudioContext = uni.createInnerAudioContext();

innerAudioContext.autoplay = true;
import { BASEDOC, BASEDOC_DEFAULT_KEY, LOGININFO_KEY } from '@/common/const/index';

export default {
	name: 'ProblemApproveDetails',
	props: {
		billId: {
			type: String,
			required: true
		},
		billType: {
			type: String,
			default: 'defaultType' // 默认的单据类型
		},
		period: {
			type: String,
			default: ''
		}
	},
	data() {
		return {
			//form-item 自定义样式
			form_item_customStyle: 'padding:18px 0px;font-family:"PingFang SC Regular"; color:"red" ; ',
			form_label_Style: {
				'font-weight': 'bold'
			},
			// datatimepicker 参数

			isSecondFilter: false, //是否是第二次筛选
			showStartTimeDateTimePicker: false,
			showEndTimeDateTimePicker: false,
			dateTimePickerCfg: {
				year: true,
				month: true,
				day: true,
				hour: true,
				minute: true,
				second: true
			},
			// end datatimepicker 参数

			problemHandlePicFileList:[], //问题处理照片路径
			problemPicFileList: [], //照片路径
			problem_videos: '', //视频路径

			// 表单
			model: {
				pk_org: '',

				ProblemId: '',
				ProblemCode: '',
				ProblemTitle: '',

				ProblemFindByPsn: '',

				ProblemPerson: '',
				ProblemLocation: '',

				ProblemCreDate: '',
				ProblemStatrTime: '',
				ProblemEndTime: '',

				ProblemDescription: '',
				ProblemVoice: '',
				ProblemPicture: '',
				ProblemVideo: '',

				ProblemFeedback: '',
				ProblemHandlePic: '',
				ProblemHandleVid: '',
				ProblemProperty: '',

				ProblemDef1: '',
				ProblemDef2: '',
				ProblemDef3: ''
			},

			rules: {
				testInput: [
					{
						required: true,
						message: '请输入单行文本',
						trigger: ['change', 'blur']
					}
				]
			},
			officeSelectList: [],
			userSelectList: [],

			current: 0,

			BASEDOC: BASEDOC,
			LOGININFO_KEY: LOGININFO_KEY
		};
	},
	mounted() {
		let queryParam = {
			ProblemId: this.billId
		};
		this.$api
			.queryProblemById(queryParam)
			.then((res) => {
				if (res.success) {
					let problemData = res.data[0];

					// 日期字段格式处理
					let dateTimeFieldArrs = ['ProblemStatrTime', 'ProblemEndTime', 'ProblemCreDate', 'ProblemUpdDate', 'ProblemAudDate'];
					dateTimeFieldArrs.map((item) => {
						if (problemData.hasOwnProperty(item) && problemData[item]) {
							if (problemData[item].includes('T')) {
								problemData[item] = this.$tool.convertISODateToUTC8Date(problemData[item]);
							}
						}
					});

					// 问题现场图片渲染到页面上
					if (problemData.ProblemPicture) {
						let problemPictureArrs = problemData.ProblemPicture.split('|');
						let tempProblemPicFileList = this.problemPicFileList;

						if (problemPictureArrs.length != 0) {
							problemPictureArrs.map((item) => {
								tempProblemPicFileList.push({
									url: `${this.$GC.API_FS_IP}/${item}`,
									filename: item
								});
							});
						}
						this.problemPicFileList = tempProblemPicFileList;
					}
					
					// 问题处理图片渲染到页面上
					if (problemData.ProblemHandlePic) {
						let problemPictureArrs = problemData.ProblemHandlePic.split('|');
						let tempProblemPicFileList = this.problemHandlePicFileList;
					
						if (problemPictureArrs.length != 0) {
							problemPictureArrs.map((item) => {
								tempProblemPicFileList.push({
									url: `${this.$GC.API_FS_IP}/${item}`,
									filename: item
								});
							});
						}
						this.problemHandlePicFileList = tempProblemPicFileList;
					}

					// 视频处理
					if (problemData.ProblemVideo) {
						this.problem_videos = `${this.$GC.API_FS_IP}/${problemData.ProblemVideo}`;
					}

					// 是否转其他部门协同
					if (problemData.ProblemDef1) {
						this.isSecondFilter = true;
					}

					this.model = problemData;
				}
			})
			.catch((error) => {
				this.$tool.msg('数据加载失败！');
			});
		// this.loadDetails();
		this.$emit('detail-loaded'); // 触发错误事件
	},
	onReady() {
		console.log('onReady');
	},
	onLoad(params) {
		console.log('onLoad');
	},
	methods: {
		async loadDetails() {},

		disableInputClick() {
			this.$u.toast('触发了点击事件！');
			return false;
		},
		refInputClick(e) {
			return false;
			uni.hideKeyboard();
			let refparam = {
				refType: BASEDOC.PSNDOC,
				queryCondition: {
					pk_org: ''
				}
			};
			let that = this;
			uni.navigateTo({
				url: '/pages/common/listref/listref?refparam=' + JSON.stringify(refparam),
				events: {
					refPageCallBack: function (data) {
						that.model[e] = data.refname;
					}
				},
				success: function (res) {}
			});
		},

		// 删除图片
		deletePic(event) {
			this[`fileList${event.name}`].splice(event.index, 1);
		},
		// 新增图片
		async afterRead(event) {
			// 当设置 mutiple 为 true 时, file 为数组格式，否则为对象格式
			let lists = [].concat(event.file);
			let fileListLen = this[`fileList${event.name}`].length;
			lists.map((item) => {
				this[`fileList${event.name}`].push({
					...item,
					status: 'uploading',
					message: '上传中'
				});
			});
			for (let i = 0; i < lists.length; i++) {
				const result = await this.uploadFilePromise(lists[i].url);
				let item = this[`fileList${event.name}`][fileListLen];
				this[`fileList${event.name}`].splice(
					fileListLen,
					1,
					Object.assign(item, {
						status: 'success',
						message: '',
						url: result
					})
				);
				fileListLen++;
			}
		},

		navTo(url) {
			uni.navigateTo({
				url: url
			});
		},
		tabChange(index) {
			let that = this;
			if (index == 0) {
				recorderManager.start();
				setTimeout(function () {
					recorderManager.stop();
				}, 10000);
			}
			if (index == 1) {
				uni.chooseImage({
					count: 3, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album', 'camera'], //从相册选择
					success: function (res) {
						console.log(JSON.stringify(res.tempFilePaths));
						let tempFiles = [];
						res.tempFilePaths.map((item) => {
							let tempObj = {
								url: item
							};
							tempFiles.push(tempObj);
						});
						that.problem_pictures = tempFiles;
					}
				});
			}
			if (index == 2) {
				uni.chooseVideo({
					sourceType: ['camera', 'album'],
					success: function (res) {
						that.problem_videos = res.tempFilePath;
					}
				});
			}
		},
		submit() {
			this.showStartTimeDateTimePicker = true;
			return;
			this.$refs.uForm.validate((valid) => {
				if (valid) {
					this.$u.api.testData.save(this.model).then((res) => {
						uni.showModal({
							title: '提示',
							content: res.message,
							showCancel: false,
							success: function () {
								if (res.result == 'true') {
									uni.setStorageSync('refreshList', true);
									uni.navigateBack();
								}
							}
						});
					});
				} else {
					this.$u.toast('您填写的信息有误，请根据提示修正。');
				}
			});
		},
		cancel() {
			uni.navigateBack();
		},
		dateTimePickerCallBack(obj, attr_name, component_id) {
			this[`${component_id}`] = false;
			let value = obj.value;
			const timeFormat = uni.$u.timeFormat,
				toast = uni.$u.toast;
			if (attr_name == '') return;
			if (value == '') {
				this.model[attr_name] = '';
			} else {
				value = timeFormat(value, 'yyyy-mm-dd hh:MM');
				this.model[attr_name] = value;
			}
		}
	}
};
</script>
<style lang="scss">
/deep/ .u-tabbar-item__text {
	font-size: 13px;
}
</style>
